@model EditProductViewModel

@{
    ViewBag.Title = Resources.Shared.AppName + " - " + string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription);
    string twoLettersCulture = new System.Globalization.CultureInfo(Culture).TwoLetterISOLanguageName;
}

<div class="view-container">
    <div class="view-header-container">
        <h2 class="view-header">@string.Format(Resources.Shared.EditViewTitle, Model.IdentityDescription)</h2>
    </div>
    <!-- Top buttons -->
    <div class="view-button-container top-button-container">
        <input type="button" class="button back-button" title="@Resources.Shared.Back" onclick="document.location = '@Url.Action("Index", "Product")'"/>
        <input type="button" class="button save-button" title="@Resources.Shared.Save" onclick="$('#ProductForm').submit()"/>
    </div>
    <!-- Form begin -->
    <div class="entity-form-container">
        @using (Html.BeginForm("Edit", "Product", FormMethod.Post, new { id = "ProductForm" }))
        {
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>@Resources.ProductResources.Product</legend>
                <div class="form">
                    @Html.HiddenFor(model => model.Id)
                    <div class="row">
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Name)
                            </div>
                            <div class="editor ">
                                @Html.TextBoxFor(model => model.Name)
                                @Html.ValidationMessageFor(model => model.Name)
                            </div>
                        </div>
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Description)
                            </div>
                            <div class="editor ">
                                @Html.TextBoxFor(model => model.Description)
                                @Html.ValidationMessageFor(model => model.Description)
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Price)
                            </div>
                            <div class="editor number-editor">
                                @Html.TextBoxFor(model => model.Price, new { @class = "number" })
                                @Html.ValidationMessageFor(model => model.Price)
                            </div>
                        </div>
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Tax)
                            </div>
                            <div class="editor number-editor">
                                @Html.TextBoxFor(model => model.Tax)
                                @Html.ValidationMessageFor(model => model.Tax)
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Prominent)
                            </div>
                            <div class="editor">
                                @Html.CheckBoxFor(model => model.Prominent)
                                @Html.ValidationMessageFor(model => model.Prominent)
                            </div>
                        </div>
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Weight)
                            </div>
                            <div class="editor number-editor">
                                @Html.TextBoxFor(model => model.Weight)
                                @Html.ValidationMessageFor(model => model.Weight)
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Discount)
                            </div>
                            <div class="editor number-editor">
                                @Html.TextBoxFor(model => model.Discount)
                                @Html.ValidationMessageFor(model => model.Discount)
                            </div>
                        </div>
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.IsInactive)
                            </div>
                            <div class="editor">
                                @Html.EditorFor(model => model.IsInactive)
                                @Html.ValidationMessageFor(model => model.IsInactive)
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="field-cell">
                            <div class="label">
                                @Html.Label(Resources.ProductResources.Subcategory)
                            </div>
                            <div class="editor">
                                @Html.DropDownListFor(model => model.SubcategoryId, new SelectList(Model.SubcategoryList, "Id", "IdentityDescription", Model.SubcategoryId))
                                @Html.ValidationMessageFor(model => model.SubcategoryId)
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        }
    </div>
    <!-- Form end -->
    <!-- Tab strip begin -->
    <div id="ProductTab-container">
        <ul>

            <li>
                <span class="tab_outer">
                    <span class="tab_inner">
                        <a href="#imagesTab">@Resources.ProductResources.Images</a>
                    </span>
                </span>
            </li>

            <li>
                <span class="tab_outer">
                    <span class="tab_inner">
                        <a href="#reviewsTab">@Resources.ProductResources.Reviews</a>
                    </span>
                </span>
            </li>

            <li>
                <span class="tab_outer">
                    <span class="tab_inner">
                        <a href="#productDetailsTab">@Resources.ProductResources.ProductDetails</a>
                    </span>
                </span>
            </li>
        </ul>
        <!-- Images Tab begin -->
        <div id="imagesTab">
            <!-- Grid begin -->
            <div class="grid-view-container">
                <div class="grid-top-buttons">
                    <input type="button" class="button create-button" title="@(Resources.Shared.Add)" onclick="document.location = '@Url.Action("CreateImage", "Product", new { masterId = Model.Id })';" />
                    <input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportImages", "Product")?masterId=@Model.Id';" />
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-panel">
                    <table id="ImagesGrid"></table>
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-count">
                    <span>@(Resources.Shared.GridTotal)<span id="ImagesGrid-total-count" class="count-number"></span></span>
                </div>
            </div>
            <!-- Grid end -->

        </div>
        <!-- Images Tab end -->
        <!-- Reviews Tab begin -->
        <div id="reviewsTab">
            <!-- Grid begin -->
            <div class="grid-view-container">
                <div class="grid-top-buttons">
                    <input type="button" class="button create-button" title="@(Resources.Shared.Add)" onclick="AddOrEditGridDetail('AddReviews', 'ReviewsGrid','@Url.Action("AddReviews", "Product")?masterId=@Model.Id', 'add');" />
                    <input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportReviews", "Product")?masterId=@Model.Id';" />
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-panel">
                    <table id="ReviewsGrid"></table>
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-count">
                    <span>@(Resources.Shared.GridTotal)<span id="ReviewsGrid-total-count" class="count-number"></span></span>
                </div>
            </div>
            <!-- Grid end -->

        </div>
        <!-- Reviews Tab end -->
        <!-- ProductDetails Tab begin -->
        <div id="productDetailsTab">
            <!-- Grid begin -->
            <div class="grid-view-container">
                <div class="grid-top-buttons">
                    <input type="button" class="button create-button" title="@(Resources.Shared.Add)" onclick="document.location = '@Url.Action("CreateProductDetail", "Product", new { masterId = Model.Id })';" />
                    <input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportProductDetails", "Product")?masterId=@Model.Id';" />
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-panel">
                    <table id="ProductDetailsGrid"></table>
                </div>
                <div class="grid-separator">
                </div>
                <div class="grid-view-count">
                    <span>@(Resources.Shared.GridTotal)<span id="ProductDetailsGrid-total-count" class="count-number"></span></span>
                </div>
            </div>
            <!-- Grid end -->

        </div>
        <!-- ProductDetails Tab end -->
    </div>
    <!-- Tab strip end -->

</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="@Url.Content("~/Scripts/cultures/methods_" + twoLettersCulture + ".js")" type="text/javascript"></script>
    <script type="text/javascript">

$("#ProductTab-container" ).tabs({
    show: function (event, ui) {
        if(ui.panel.id == "imagesTab")
        {
            $("#ImagesGrid").jqGrid({
                url: '@Url.Action("LoadImages", "Product")?masterId=@Model.Id',
                datatype: 'json',
                mtype: 'POST',
                autowidth: true,
                altRows: true,
                altclass: 'grid-alt-row',
                rowNum: -1,
                colNames: ['Image','Name', 'Description', 'SortOrder', '', ''],
                colModel: [
                    { index: 'Image', name: 'Image', sortable: false, resizable: false, formatter: imageFormatter},
                    { index: 'Name', name: 'Name', sortable: false, resizable: false},
                    { index: 'Description', name: 'Description', sortable: false, resizable: false},
                    { index: 'SortOrder', name: 'SortOrder', sortable: false, resizable: false},
                    { name: 'edit', sortable: false, classes: 'grid-cell-edit', resizable: false },
                    { name: 'delete', sortable: false, classes: 'grid-cell-delete', resizable: false },
                ],
                gridComplete: 
                    function(){ 
                        var ids = jQuery("#ImagesGrid").jqGrid('getDataIDs'); 
                        for(var i=0;i < ids.length;i++)
                        { 
                            var rowId = ids[i]; 
                            var editHtml = '<a href="#" onclick="document.location = \'@Url.Action("ChangeImage", "Product")/' + rowId + '\';" title="@Resources.Shared.Edit"><img src="@Url.Content("~/Content/Images/CRUD/edit.png")"/></a>';
						        var deleteHtml = '<a href="#" onclick="return DeleteGridItem(\'ImagesGrid\', \'@Url.Action("DeleteImages", "Product")\', \'' + rowId + '\', \'@Model.Id\')" title="@Resources.Shared.Delete"><img src="@Url.Content("~/Content/Images/CRUD/delete.png")"/></a>';
						        $("#ImagesGrid").jqGrid('setRowData', ids[i], { edit: editHtml, 'delete': deleteHtml }); 
						    }
							
						    $("#ImagesGrid").jqGrid('setLabel', 'Image', '', 'grid-header-data', '');
						    $("#ImagesGrid").jqGrid('setLabel', 'Name', '@Resources.ImageResources.Name', 'grid-header-data', '');
						    $("#ImagesGrid").jqGrid('setLabel', 'Description', '@Resources.ImageResources.Description', 'grid-header-data', '');
						    $("#ImagesGrid").jqGrid('setLabel', 'SortOrder', '@Resources.ImageResources.SortOrder', 'grid-header-data', '');
						    $("#ImagesGrid").jqGrid('setLabel', 'edit', '', 'grid-header-edit', '');							
						    $("#ImagesGrid").jqGrid('setLabel', 'delete', '', 'grid-header-delete', '');
							
						    // Fix: jqgrid first row causes problems with fixed cols
						    FixGridColumnSize({ gridId: "ImagesGrid", hasEdit: true, hasDelete: true });
						},
                loadComplete:
                    function(data){ 
                        SetGridTotalCount("ImagesGrid", data.records);
                    }
            });
            }
        if(ui.panel.id == "reviewsTab")
        {
            $("#ReviewsGrid").jqGrid({
                url: '@Url.Action("LoadReviews", "Product")?masterId=@Model.Id',
	            datatype: 'json',
	            mtype: 'POST',
	            autowidth: true,
	            altRows: true,
	            altclass: 'grid-alt-row',
	            rowNum: -1,
	            colNames: ['Date', 'Rating', 'Comment', 'Customer', '', ''],
	            colModel: [
                { index: 'Date', name: 'Date', sortable: false, resizable: false},
                { index: 'Rating', name: 'Rating', sortable: false, resizable: false, formatter: ratingFormatter},
                { index: 'Comment', name: 'Comment', sortable: false, resizable: false},
                { index: 'Customer', name: 'Customer', sortable: false, resizable: false},
                    { name: 'edit', sortable: false, classes: 'grid-cell-edit', resizable: false },
                    { name: 'delete', sortable: false, classes: 'grid-cell-delete', resizable: false },
	            ],
	            gridComplete: 
                    function(){ 
                        var ids = jQuery("#ReviewsGrid").jqGrid('getDataIDs'); 
                        for(var i=0;i < ids.length;i++)
                        { 
                            var rowId = ids[i]; 
                            var editHtml = '<a href="#" onclick="AddOrEditGridDetail(\'EditReviews\', \'ReviewsGrid\',\'@Url.Action("EditReviews", "Product")/' + rowId  + '?masterId=@Model.Id\', \'edit\')" title="@Resources.Shared.Edit"><img src="@Url.Content("~/Content/Images/CRUD/edit.png")"/></a>';
						        var deleteHtml = '<a href="#" onclick="return DeleteGridItem(\'ReviewsGrid\', \'@Url.Action("DeleteReviews", "Product")\', \'' + rowId + '\', \'@Model.Id\')" title="@Resources.Shared.Delete"><img src="@Url.Content("~/Content/Images/CRUD/delete.png")"/></a>';
						        $("#ReviewsGrid").jqGrid('setRowData', ids[i], { edit: editHtml, delete: deleteHtml }); 
						    }
							
						    $("#ReviewsGrid").jqGrid('setLabel', 'Date', '@Resources.ReviewResources.Date', 'grid-header-data', '');
						    $("#ReviewsGrid").jqGrid('setLabel', 'Rating', '@Resources.ReviewResources.Rating', 'grid-header-data', '');
						    $("#ReviewsGrid").jqGrid('setLabel', 'Comment', '@Resources.ReviewResources.Comment', 'grid-header-data', '');
						    $("#ReviewsGrid").jqGrid('setLabel', 'Customer', '@Resources.ReviewResources.Customer', 'grid-header-data', '');
						    $("#ReviewsGrid").jqGrid('setLabel', 'edit', '', 'grid-header-edit', '');							
						    $("#ReviewsGrid").jqGrid('setLabel', 'delete', '', 'grid-header-delete', '');
							
						    // Fix: jqgrid first row causes problems with fixed cols
						    FixGridColumnSize({ gridId: "ReviewsGrid", hasEdit: true, hasDelete: true });
						},
	            loadComplete:
                    function(data){ 
                        SetGridTotalCount("ReviewsGrid", data.records);
                    }
	        });
            }
        if(ui.panel.id == "productDetailsTab")
        {
            $("#ProductDetailsGrid").jqGrid({
                url: '@Url.Action("LoadProductDetails", "Product")?masterId=@Model.Id',
	            datatype: 'json',
	            mtype: 'POST',
	            autowidth: true,
	            altRows: true,
	            altclass: 'grid-alt-row',
	            rowNum: -1,
	            colNames: ['','Stock', '', ''],
	            colModel: [
                    { index: 'IdentityDescription', name: 'IdentityDescription', sortable: false, resizable: false},
                    { index: 'Stock', name: 'Stock', sortable: false, resizable: false},
                    { name: 'edit', sortable: false, classes: 'grid-cell-edit', resizable: false },
                    { name: 'delete', sortable: false, classes: 'grid-cell-delete', resizable: false },
	            ],
	            gridComplete: 
                    function(){ 
                        var ids = jQuery("#ProductDetailsGrid").jqGrid('getDataIDs'); 
                        for(var i=0;i < ids.length;i++)
                        { 
                            var rowId = ids[i]; 
                            var editHtml = '<a href="#" onclick="document.location = \'@Url.Action("ChangeProductDetail", "Product")/' + rowId + '\';" title="@Resources.Shared.Edit"><img src="@Url.Content("~/Content/Images/CRUD/edit.png")"/></a>';
						        var deleteHtml = '<a href="#" onclick="return DeleteGridItem(\'ProductDetailsGrid\', \'@Url.Action("DeleteProductDetails", "Product")\', \'' + rowId + '\', \'@Model.Id\')" title="@Resources.Shared.Delete"><img src="@Url.Content("~/Content/Images/CRUD/delete.png")"/></a>';
						        $("#ProductDetailsGrid").jqGrid('setRowData', ids[i], { edit: editHtml, delete: deleteHtml }); 
						    }
							
						    $("#ProductDetailsGrid").jqGrid('setLabel', 'IdentityDescription', '', 'grid-header-data', '');
						    $("#ProductDetailsGrid").jqGrid('setLabel', 'Stock', '@Resources.ProductDetailResources.Stock', 'grid-header-data', '');
						    $("#ProductDetailsGrid").jqGrid('setLabel', 'edit', '', 'grid-header-edit', '');							
						    $("#ProductDetailsGrid").jqGrid('setLabel', 'delete', '', 'grid-header-delete', '');
							
						    // Fix: jqgrid first row causes problems with fixed cols
						    FixGridColumnSize({ gridId: "ProductDetailsGrid", hasEdit: true, hasDelete: true });
						},
	            loadComplete:
                    function(data){ 
                        SetGridTotalCount("ProductDetailsGrid", data.records);
                    }
	        });
                }
    }
});

        function imageFormatter(el, cellval, opts)
        {
            var url = '@(Url.Action("DownloadBinary", "Image", new { id = "[id]", p = "Data" }))';
            return '<img src="' + url.replace('[id]', el) + '" alt="Image content" class="image-border" />';
        }

        function ratingFormatter(el, cellval, opts)
        {
            var template = '<ul class="rating">';
            for (var i=1;i<=5;i++)
            {
                var css = (i <= el) ? "star" : "star-disabled";
                template = template + '<li class="' +  css + '" title="' + i + '"></li>';
            }
            template =  template + '</ul>';
            return template;
        }
    </script>
}
